<template>
  <div class="knowledge-list-wrapper">
    <portal-header />
    <div class="knowledge-list-body">

      <div class="w-content fs-20 h-100">
        <el-tabs v-model="currentTab" tab-position="left">
          <el-tab-pane v-for="(item, index ) in knowledgeTypeList" :key="index" :name="item.value">
            <span slot="label" class="fs-20"> {{ item.name }}</span>
            <el-card v-for="(knowledge, i) in knowledgeList" :key="i" style="margin-bottom: 10px">
              <div class="d-flex flex-column">
                <label style="margin-bottom: 3px">Q: {{ knowledge.question }}</label>
                <span>A: {{ knowledge.answer }}</span>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <portal-footer />
  </div>
</template>

<script>
import PortalHeader from './components/PortalHeader'
import PortalFooter from './components/PortalFooter'
import { formatDateTime } from '@/utils/formatdate'
import { dictConfigItemByDictKeyList } from '@/api/rest/dictconfig'
import { DICT_CONFIG_KEY_KNOWLEDGE_TYPE } from '@/utils/constant'
import { searchKnowledgeList } from '@/api/rest/portal/portal'

export default {
  name: 'KnowledgeList',
  components: { PortalHeader, PortalFooter },
  filters: {
    formatTime(val) {
      if (val) {
        return formatDateTime(val)
      }
    }
  },
  data() {
    return {
      knowledgeTypeList: [],
      knowledgeTypeMap: [],
      knowledgeMap: {},
      currentTab: '10',
      knowledgeList: []
    }
  },
  watch: {
    currentTab() {
      this.loadKnowledgeList()
    }
  },
  created() {
    this.getKnowledgeTypeList()
    this.loadKnowledgeList()
  },
  methods: {
    getKnowledgeTypeList() {
      dictConfigItemByDictKeyList(DICT_CONFIG_KEY_KNOWLEDGE_TYPE)
        .then(response => {
          this.knowledgeTypeList = []
          const map = {}
          response.data.forEach(item => {
            this.knowledgeTypeList.push({ value: item.itemValue, name: item.itemName })
            map[item.itemValue] = item.itemName
          })
          this.knowledgeTypeMap = map
        })
    },
    loadKnowledgeList() {
      searchKnowledgeList({ type: this.currentTab })
        .then(response => {
          this.knowledgeList = response.data
        })
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/portal/common.scss';
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.knowledge-list-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.knowledge-list-body {
  flex: 1;
  margin-top: 40px;
}

.search-section {
  height: 72px;
  background: #fff;
  background-image: url('~@/assets/portal_images/search/search_bg.png');

  input {
    height: 40px;
    border: 1px solid $portalBlueColor;
    width: 786px;
    padding-left: 6px
  }

  .search-button {
    width: 40px;
    height: 40px;
    background: $portalBlueColor;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  img {
    width: 24px;
    height: 24px;
  }
}
</style>
